<!doctype html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>
<title>layim</title>
<body>
	<button style="margin-left: 50%" id="off_line" class="layui-btn layui-btn-lg layui-btn-radius">下线</button>
	<input id="userId" type="hidden" th:value="${session.user.id}">

	<fieldset class="layui-elem-field layui-field-title">
		<legend>(AI): im 智能聊天历史进程</legend>
	</fieldset>
	<ul class="layui-timeline">
		<li class="layui-timeline-item">
			<i class="layui-icon layui-timeline-axis"></i>
			<div class="layui-timeline-content layui-text">
				<div class="layui-timeline-title">2019-07-01，整合腾讯/百度AI，实现智能机器人对话......</div>
			</div>
		</li>
		<li class="layui-timeline-item">
			<i class="layui-icon layui-timeline-axis"></i>
			<div class="layui-timeline-content layui-text">
				<div class="layui-timeline-title">2019-06-20，历史消息，离线消息记录</div>
			</div>
		</li>
		<li class="layui-timeline-item">
			<i class="layui-icon layui-timeline-axis"></i>
			<div class="layui-timeline-content layui-text">
				<div class="layui-timeline-title">2019-06-01，图片，文件上传</div>
			</div>
		</li>
		<li class="layui-timeline-item">
			<i class="layui-icon layui-timeline-axis"></i>
			<div class="layui-timeline-content layui-text">
				<div class="layui-timeline-title">2019-05-20，集成websocket</div>
			</div>
		</li>
		<li class="layui-timeline-item">
			<i class="layui-icon layui-timeline-axis"></i>
			<div class="layui-timeline-content layui-text">
				<div class="layui-timeline-title">2019-05-10，集成layim 前端框架</div>
			</div>
		</li>
		<li class="layui-timeline-item">
			<i class="layui-icon layui-timeline-axis"></i>
			<div class="layui-timeline-content layui-text">
				<div class="layui-timeline-title">2019-04-20，im 首个版本发布</div>
			</div>
		</li>
		<li class="layui-timeline-item">
			<i class="layui-icon layui-timeline-axis"></i>
			<div class="layui-timeline-content layui-text">
				<div class="layui-timeline-title">2019-04-10，im 孵化</div>
			</div>
		</li>
		<li class="layui-timeline-item">
			<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
			<div class="layui-timeline-content layui-text">
				<div class="layui-timeline-title">2019-04-05，创立im项目</div>
			</div>
		</li>
	</ul>

	<div th:include="include::footer"></div>
	<script src="/js/reconnecting-websocket.js"></script>
	<script src="/js/ws-im-chat.js"></script>
	<script>
		layui.use([ 'upload', 'layim' ], function() {
			layim = layui.layim;
			var upload = layui.upload;
			//基础配置
			layim.config({
				title : "[[${session.user.nickName}]]",
				//初始化接口
				init : {
					url : '/layim/initData',
					data : {}
				},
				//查看群员接口
				members : {
					url : '/layim/members',
					data : {}
				},
				uploadImage : {
					url : '/file/uploadImg',//（返回的数据格式见下文）
					type : '' //默认post
				},
				uploadFile : {
					url : '/file/upload', //（返回的数据格式见下文）
					type : '' //默认post
				},
				isAudio : true, //开启聊天工具栏音频
				isVideo : true, //开启聊天工具栏视频
				//扩展工具栏
				tool : [ {
					alias : 'code',
					title : '代码',
					icon : '&#xe64e;'
				} ],
				//,brief: true //是否简约模式（若开启则不显示主面板）

				//,title: 'WebIM' //自定义主面板最小化时的标题
				//,right: '100px' //主面板相对浏览器右侧距离
				//,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
				initSkin : '3.jpg', //1-5 设置初始背景
				//,skin: ['aaa.jpg'] //新增皮肤
				//,isfriend: false //是否开启好友
				//,isgroup: false //是否开启群组
				//,min: true //是否始终最小化主面板，默认false
				//,notice: true //是否开启桌面消息提醒，默认false
				//,voice: false //声音提醒，默认开启，声音文件为：default.mp3
				//msgbox : '/layim/page/msgbox.html', //消息盒子页面地址，若不开启，剔除该项即可
				//find : '/layim/page/find.html',//发现页面地址，若不开启，剔除该项即可
				chatLog : '/layim/chatlog' //聊天记录页面地址，若不开启，剔除该项即可

			});
			//监听在线状态的切换事件
			layim.on('online', function(status) {
				layer.msg(status);
			});

			//监听签名修改
			layim.on('sign', function(value) {
				layer.msg(value);
			});
			//监听自定义工具栏点击，以添加代码为例
			layim.on('tool(code)', function(insert) {
				layer.prompt({
					title : '插入代码 - 工具栏扩展示例',
					formType : 2,
					shade : 0
				}, function(text, index) {
					layer.close(index);
					insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
				});
			});

			//监听layim建立就绪
			layim.on('ready', function(res) {
				//console.log(res.mine);
				//连接websocket->注意先后顺序
				connSingleChat();
				//layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得
			});
			//监听发送消息
			layim.on('sendMessage', function(data) {
				var to = data.to;
				var mine = data.mine;//我自己
				console.log(mine);
				console.log(to);
				var obj = {
					fromid : mine.id,
					toid : to.id,
					toname : to.username,
					toavatar : to.avatar,
					id : to.type == 'group' ? to.id : mine.id,
					username : mine.username,
					content : mine.content,
					avatar : mine.avatar,
					type : to.type,
				};
				//websocket:直接发送
				ws.send(JSON.stringify(obj));

			});
			//监听查看群员
			layim.on('members', function(data) {
				//console.log(data);
			});

			//监听聊天窗口的切换
			layim.on('chatChange', function(res) {
				var type = res.data.type;
				//console.log(res.data.id)
				if (type === 'friend') {
					//模拟标注好友状态
					//layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
				} else if (type === 'group') {
					//模拟系统消息
					/* layim.getMessage({
						system : true,
						id : res.data.id,
						type : "group",
						content : '模拟群员' + (Math.random() * 100 | 0) + '加入群聊'
					}); */
				}
			});

		});
	</script>
</body>
</html>